<template>
  <div class="pneleft">
    <div class="pan_top">
      <span>
        持
        <br />
        仓
      </span>
    </div>
    <div class="pan_rig">
      <div class="pan_rig_top">
        <div class="pan_rig_to_zi">
          <button class="butt_cha" @click="btnlist && wholecloseposition()">全部平仓</button>
          <button class="butt_cha" @click="btnlist && quickcloseposition()">快捷平仓</button>
          <button class="butt_cha" @click="btnlist && quickbackhand()">快捷反手</button>
          <button class="butt_cha" @click="btnlist && ordernum()">止盈止损</button>
        </div>
      </div>
      <div class="data_lst">
        <div class="data_title">
          <div class="title_one" style="width: 145px;">合约</div>
          <div class="title_one" style="width: 40px;">方向</div>
          <div class="title_one" style="width: 50px;">手数</div>
          <div class="title_one" style="width: 145px;">开仓价</div>
          <div class="title_one" style="width: 145px;">最新价</div>
          <div class="title_one" style="width: 145px;">持仓盈亏</div>
          <div class="title_one" style="width: 145px;">止损</div>
          <div class="title_one" style="width: 145px;">止盈</div>
          <div class="title_one" style="width: 145px;">手续费</div>
          <div class="title_one" style="width: 145px;">保证金</div>
          <div class="title_one" style="width: 145px;">名称</div>
        </div>
        <div class="data_info">
          <div
            :class="activeClass1 == index ? 'activess' : ''"
            v-for="(item, index) in positionslist"
            :key="index"
            @click="getItemhold(item, index)"
            class="data_title_one"
            style="cursor: default;"
          >
            <div class="title_sone" style="width: 145px;">{{ (optionlist[item.code] && optionlist[item.code]['name_code']) || '- -' }}</div>
            <div :class="item.rise_fall == 'RISE' ? 'title_red' : 'title_green'" class="title_sone" style="width: 40px;">{{ item.rise_fall == 'RISE' ? '买' : '卖' }}</div>
            <div class="title_sone" style="width: 50px;">{{ item.volume }}</div>
            <div class="title_sone" style="width: 145px;">{{ Number(item.open_price) || 0 }}</div>
            <div class="title_sone" style="width: 145px;">{{ Number(ticket[item.code] && ticket[item.code].price) || 0 }}</div>
            <div
              :class="
                (item.rise_fall == 'RISE'
                  ? parseFloat(ticket[item.code] && ticket[item.code]['price']) - parseFloat(item.open_price)
                  : parseFloat(item.open_price) - parseFloat(ticket[item.code] && ticket[item.code]['price'])
                ).toFixed(2) >= 0
                  ? 'title_red title_sone'
                  : 'title_green title_sone'
              "
              style="width: 145px;"
            >
              {{
                Number((ticket[item.symbol] && ticket[item.symbol].price) || 0) == 0
                  ? '- -'
                  : item.rise_fall == 'RISE'
                  ? (
                      (parseFloat((ticket[item.symbol] && ticket[item.symbol]['price']) || 0) - parseFloat(item.open_price || 0)) *
                      parseFloat(item.symbol_detail['unit_price'] || 0) *
                      parseFloat(item.volume || 0)
                    ).toFixed(2)
                  : (
                      (parseFloat(item.open_price || 0) - parseFloat((ticket[item.symbol] && ticket[item.symbol]['price']) || 0)) *
                      parseFloat(item.symbol_detail['unit_price'] || 0) *
                      parseFloat(item.volume || 0)
                    ).toFixed(2)
              }}
            </div>
            <div class="title_sone" style="width: 145px;">{{ parseFloat(item.stop_loss_price || 0).toFixed(2) || '0.00 ' }}</div>
            <div class="title_sone" style="width: 145px;">{{ parseFloat(item.stop_profit_price || 0).toFixed(2) || '0.00 ' }}</div>
            <div class="title_sone" style="width: 145px;">{{ parseFloat(item.service_fee || 0).toFixed(2) }}</div>
            <div class="title_sone" style="width: 145px;">{{ parseFloat(item.deposit).toFixed(2) }}</div>
            <div class="title_sone" style="width: 145px;">{{ item.symbol_cn }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist /* 全部合约代码 */
  }),
  data() {
    return {
      btnlist: true,
      activeClass1: -1,
      positionslist: [], //持仓列表
      holeid: '',
      stop_profit_price: '',
      stop_loss_point: '',
      iscance1: '',
      iscance2: '',
      lefttab: [
        {
          name: this.$t('m.Mypage'),
          id: 1
        },
        {
          name: this.$t('m.Internationalplate'),
          id: 2
        }
      ]
    };
  },
  beforeDestroy() {
    clearInterval(this.chicangtime);
    this.chicangtime = null;
  },
  mounted() {
    this.positions();
    this.loadtime();
  },
  methods: {
    loadtime() {
      this.chicangtime = setInterval(() => {
        this.positions();
      }, 1500);
    },
    // 止盈止损设置
    ordernum(item) {
      if (!this.holeid) {
        return this.$message.error('请选中一笔进行操作！');
      }
      var that = this;
      that.btnlist = false;
      that.$layer.open({
        content: "<div id='inputbtn'></div>",
        title: '请输入止盈、止损值',
        btn: ['确定', '取消'],
        yes: function(index, layero) {
          //按钮【按钮一】的回调
          that.stop_profit_price = $('#stop_profit_price').val();
          that.stop_loss_point = $('#stop_loss_point').val();

          if (that.stop_profit_price == '' || that.stop_profit_price == 0 || that.stop_profit_price == undefined) {
            that.stop_profit_price = null;
          }
          if (that.stop_loss_point == '' || that.stop_loss_point == 0 || that.stop_loss_point == undefined) {
            that.stop_loss_point = null;
          }
          var postlsit;
          postlsit = {
            stop_profit_price: that.stop_profit_price,
            stop_loss_price: that.stop_loss_point,
            orderid: that.holeid
          };

          that.$post('addons/tf-futures/order/up-with-price', postlsit).then(res => {
            that.btnlist = true;
            that.holeid = null;
            that.activeClass1 = -1;
            that.$store.commit('set', {
              hoidlist: that.holeid
            });
            that.$layer.closeAll();
            if (res.code == 200) {
              that.$layer.msg(res.message || '设置成功');
            } else {
              that.$layer.msg(res.message || '设置失败');
            }
          });
        },
        btn2: function(index, layero) {
          //按钮【按钮二】的回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        },
        cancel: function() {
          //右上角关闭回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
      var appendHtml = $('#inputbtn').html(
        '<div>止盈:<input type="number" id="stop_profit_price" placeholder="请输入止盈" style="padding: 5px;"/></div>' +
          '<div>止损:<input type="number" id="stop_loss_point" placeholder="请输入止损" style="padding: 5px;"/></div>'
      );
      // this.$compile(appendHtml.get(0));
    },
    //全部平仓
    wholecloseposition() {
      this.btnlist = false;
      if (this.positionslist == '') {
        this.btnlist = true;
        this.$notify.error('暂无持仓记录无法全部平仓！');
        return;
      }
      this.$post('addons/tf-futures/order/close-all').then(res => {
        this.btnlist = true;
        this.activeClass1 = -1;
        this.$store.commit('set', {
          hoidlist: null
        });
        if (res.code == 200) {
          return this.$notify.success(res.message || '全部平仓成功');
        } else {
          return this.$notify.error(res.message || '全部平仓失败');
        }
      });
    },
    //快捷平仓
    quickcloseposition() {
      this.btnlist = false;
      if (this.holeid == '' || this.holeid == null || this.holeid == undefined) {
        this.btnlist = true;
        this.$notify.error('请选择要交易的品种！');
        return;
      }
      this.$post('addons/tf-futures/order/close-order', {
        orderid: this.holeid
      }).then(res => {
        this.btnlist = true;
        this.activeClass1 = -1;
        this.holeid = null;
        this.$store.commit('set', {
          hoidlist: null
        });
        if (res.code == 200) {
          return this.$notify.success(res.message || '平仓成功');
        } else {
          return this.$notify.error(res.message || '平仓失败');
        }
      });
    },
    //快捷反手
    quickbackhand() {
      this.btnlist = false;
      if (this.holeid == '' || this.holeid == null || this.holeid == undefined) {
        this.btnlist = true;
        this.$notify.error('请选择要交易的品种！');
        return;
      }
      this.$post('addons/tf-futures/order/bank-hand', {
        orderid: this.holeid
      }).then(res => {
        this.btnlist = true;
        this.activeClass1 = -1;
        this.holeid = null;
        this.$store.commit('set', {
          hoidlist: null
        });
        if (res.code == 200) {
          return this.$notify.success(res.message || '反手成功');
        } else {
          return this.$notify.error(res.message || '反手失败');
        }
      });
    },
    /* 点击事件 */
    getItemhold(item, index) {
      this.activeClass1 = index;
      this.holeid = item.id;
      this.$store.commit('set', {
        hoidlist: this.holeid
      });
      for (let i in this.optionlist) {
        if (item.code == this.optionlist[i]['code']) {
          this.$store.commit('trade/select', this.optionlist[i]);
        }
      }
    },
    //持仓列表
    positions() {
      this.$get('addons/tf-futures/order/list?state=hold').then(res => {
        if (res.code == 200) {
          // if (res.data.length == 0) {
          //   this.$notify.error('暂无信息！');
          // }
          this.positionslist = res.data;
        } else {
          console.log(res.message || '暂无信息');
        }
      });
    }
  }
};
</script>

<style scoped>
.pneleft {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.pan_top {
  width: 25px;
  height: 100%;
  background-color: #e3e2da;
  border: #003c74 solid 1px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}

.pan_rig {
  width: calc(100% - 28px);
  height: 100%;
  background-color: #ffffff;
  box-sizing: border-box;
  padding-bottom: 30px;
}

.pan_rig_top {
  width: 100%;
  height: 28px;
  padding-right: 8px;
  box-sizing: border-box;
}

.pan_rig_to_zi {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* 按钮 */
.butt_cha {
  width: 76px;
  height: 23px;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #fbfbfb, #f7f7f7, #f2f2f2);
  border: #003c74 solid 1px;
  margin-right: 5px;
  margin-left: 3px;
}

.data_lst {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
  overflow-x: auto;
  overflow-y: hidden;
}

.data_title {
  height: 28px;
  margin-top: 2px;
  border-top: #7f9db9 solid 1px;
  border-bottom: #7f9db9 solid 1px;
  display: flex;
  justify-content: flex-start;
  width: 200%;
}
.title_one {
  height: 28px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
  border-right: #7f9db9 solid 1px;
  color: #000000;
}
/* 表格内容盒子 */
.data_info {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: calc(100% - 30px);
  box-sizing: border-box;
  padding-bottom: 20px;
  width: 200%;
}
/* 表格内容 */
.data_title_one {
  height: 28px;
  width: 100%;
}

.title_sone {
  color: #000000;
  height: 25px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
}

.title_red {
  color: #fe2424;
}

.title_green {
  color: #007f00;
}

.title_blue {
  color: #0000ff;
}

/*持仓*/
.activess {
  background-color: #3399ff;
  color: #ffffff;
}
</style>
